代码 > 记录 element vue的upload组件的使用
2018-08-23
感觉智商再一次受到了鄙视。
一路既往的无法从文档和源代码中找到思路。
最后相想通了，使用upload组件需要两个变量。
一个用来初始化和清除组件的附件列表。
一个在onChange事件中赋值，用来记录附件的最新文件列表。
filelist的真实值可以作为数组循环，可以通过子元素status是否为success来判断成功与否，可以通过response来获取服务器的返回值。
大概代码如下:
<el-upload
class="upload"
drag
action="/file/upload"
:on-change="onFileChange"
:file-list="FileList"
limit="1"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
'onFileChange':function(file,filelist){
this.Model.FileList=filelist
},
'onSubmit':function(){
let files=[]
let self=this;
for(let file of this.Model.FileList){
if (file.status==="success"){
files.push(file.response.url)
}
}
self.Form={
Content:this.Model.Content,
FileList:files
}
},
点击登录